<template>
    
    <el-dialog custom-class="dlg-warp" :append-to-body="true" :destroy-on-close="true" :show-close="showClose" :width="width" > <!--  :visible.sync="dlg" -->
        <template #header="" >
            <div class="title">{{title}}</div>
        </template>
        <!--
        <template slot="title">
            <div class="title">{{title}}</div>
        </template> -->
        <slot ></slot>
         <div slot="footer" class="dialog-footer" v-if="showBtn">
    <button class="cancel" @click="dlg=false">取 消</button>
    <button class="comfirm" type="primary" @click="commitFuc">确 定</button>
  </div>
    </el-dialog>
</template>

<script lang="ts" >
    export default {
            props:{
                value:Boolean,
                title:String,
                showClose:{
                    type:Boolean,
                    default:false,
                },
                showBtn:{
                    type:Boolean,
                    default:true,
                },
                width:{
                     type:String,
                    default:'30%',
                },
                commitFuc:{
                    type:Function,
                    default:()=>{}
                },
                cancelFuc:{
                    type:Function,
                    default:()=>{}
                },
            },
            data(){
                return {
                    dlg:false
                }
                
            },
            mounted(){
                this.dlg = this.value
            },
            methods: {
                
            },
            watch:{
                dlg(val){
                    this.$emit('input',val)
                },
                value(val){
                    this.dlg = val
                }
            }
    }
</script>

<style lang="scss" scoped>

.title{
    background:url("../../../src/assets/images/bg/di@2x.png");
    background-size: 100% 100%;
    font-size:26px;
    text-align:center;
    padding:10px 0;
}
.cancel{
    padding:10px 20px;
    border-radius: 4px;
    font-size:16px;
    border: 1px solid #ff5f19;
    color: #ff5f19;
}
.el-dialog__header{
    padding: 0;
}
.comfirm{
    
    color: #ffffff;
    background:#ff5f19;
    padding:10px 20px;
    border-radius: 4px;
    font-size:16px;
    margin-left:20px
}

</style>